import React, { useState } from "react";
import { Button, Table } from "antd";
import { useTranslation } from "react-i18next";

import questionIcon from "../../assets/images/dapp/questionIcon.svg";
import greenUpIcon from "../../assets/images/dapp/greenUp.png";
import TokenBanner from "../../assets/images/ecology/tokenBanner.png";
import Icon1 from "../../assets/images/ecology/contractAddressIcon1.svg";
import Icon2 from "../../assets/images/ecology/contractAddressIcon2.svg";


const LTToken = () => {
  const { t } = useTranslation();
  const [overviewData, setOverviewData] = useState({
    total: "5,734.1793",
    transTotal: "49,534,853.1945",
    rate: "-7.17",
    coin: "ESTD",
    date: "2023-09-12",
    redemption: "228.7619",
    realTime: "1568.9828",
    tvl: "89,877,384.00",
    contractAddress: "ox123s3c…g4df4r",
    apr: "387.00%",
  });


  const columns1 = [
    {
      title:  t("ltToken.column1"),
      dataIndex: 'a',
      key: 'a',
      width:163,
      align:'center'
    },
    {
      title: t("ltToken.column2"),
      dataIndex: 'b',
      key: 'b',
      width:161,
      align:'center'


    },
    {
      title: t("ltToken.column3"),
      dataIndex: 'c',
      key: 'c',
      width:163,
      align:'center'

    },
 
  ];

  const dataSource1 = [
    {a: '1-LPA Staking', b: 'LP-ESDT/LT', c: '0.3%, up to 50%', d: ''},
    {a: '2-LPB Staking', b: 'LP-LT/USDT', c: '0.3%, up to 50%', d: ''},
    {a: '3-LT Locking', b: 'LT', c: '0.2%, up to 50%', d: ''},
    {a: '4-other', b: '--', c: '0.2%, up to 50%', d: ''},

  ]

  const columns2 = [
    {
      title:  t("ltToken.column4"),
      dataIndex: 'a',
      key: 'a',
      width:200,
      align:'center'
    },
    {
      title: t("ltToken.column5"),
      dataIndex: 'b',
      key: 'b',
      width:116,
      align:'center'


    },
    {
      title: t("ltToken.column6"),
      dataIndex: 'c',
      key: 'c',
      width:421,
      align:'center'

    },
  ];

  const dataSource2 = [
    {a: 'Ecology', b: '30%', c: 'Managed by multi-signature wallets'},
    {a: 'Founding Team', b: '25%', c: 'Distribution to Genesis Team'},
    {a: 'Market Operations', b: '45%', c: 'Managed by multi-signature wallets'},
  ]

  const columns3 = [
    {
      title:  t("ltToken.column7"),
      dataIndex: 'a',
      key: 'a',
      width:163,
      align:'center'
    },
    {
      title: t("ltToken.column8"),
      dataIndex: 'b',
      key: 'b',
      width:163,
      align:'center'


    },
    {
      title:  t("ltToken.column9"),
      dataIndex: 'c',
      key: 'c',
      width:163,
      align:'center'

    },
  ];

  const dataSource3 = [
    {a: '1', b: '10', c: '1890W'},
    {a: '2', b: '10', c: '1890W'},
    {a: '3', b: '10', c: '1890W'},
    {a: '4', b: '10', c: '1890W'},
    {a: '5', b: '10', c: '1890W'},
    {a: '6', b: '10', c: '1890W'},
    {a: '7', b: '10', c: '1890W'},
    {a: '8', b: '10', c: '1890W'},
    {a: '9', b: '10', c: '1890W'},
    {a: '10', b: '10', c: '1890W'},

  ]

  return (
    <div className="app-container esdttoken-page lttoken-page">
      <div className="top-box-bk">
      <div className="top-box">
        <div className="top-banner">
          <div className="banner-title">{t("ltToken.bannerTitle")}</div>
          <div className="banner-sub-title">
            {t("ltToken.bannerSubTitle")}
          </div>
          <div className="banner-btn">{t("ltToken.bannerBtn")}</div>
          <img src={TokenBanner} className="banner-img" />

        </div>
        <div className="top">
          <div className="left">

            <div className="left-chart">


            </div>
            <div className="contract-address-row">
              <div className="address-value">{t('ltToken.contractAddress')}: 0x0954906da0bf32dg592j25f46056d22f08w17ls7</div>
              <div className="icon-box">

                <img className="icon1" src={Icon1}></img>
                <img className="icon2" src={Icon2}></img>

              </div>
            </div>
          </div>
          <div className="right">
            <div className="header" >
              <div className="title-text">{t("home.blockOneTitle")}</div>
              <div className="right-corner">
                {t("dappIndexoverview.topRightCorner")}
                <img src={questionIcon} class="question-icon"></img>
              </div>
            </div>
            <div className="total-data-box">
              <div className="total-text">
                <img src={greenUpIcon} class="trend-icon"></img>
                {overviewData.total}
              </div>
              <div className="trans-row">
                <div className="trans-text">{overviewData.transTotal}</div>
                <div className="time-data">24h: {overviewData.rate}</div>
              </div>
              <div className="data-group">
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.coin")}
                  </div>
                  <div className="item-value blod-text">
                    {overviewData.coin}
                  </div>
                </div>
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.date")}
                  </div>
                  <div className="item-value">{overviewData.date}</div>
                </div>
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.redemption")}
                  </div>
                  <div className="item-value">{overviewData.redemption}</div>
                </div>
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.realTime")}
                  </div>
                  <div className="item-value">{overviewData.realTime}</div>
                </div>
                <div className="data-row">
                  <div className="item-label">{t("dappIndexoverview.tvl")}</div>
                  <div className="item-value">{overviewData.tvl}</div>
                </div>
                <div className="data-row">
                  <div className="item-label">
                    {t("dappIndexoverview.contractAddress")}
                  </div>
                  <div className="item-value origin-text">
                    {overviewData.contractAddress}
                  </div>
                </div>
                <div className="data-row">
                  <div className="item-label">{t("dappIndexoverview.apr")}</div>
                  <div className="item-value blod-text green-text">
                    {overviewData.apr}
                  </div>
                </div>
              </div>
              <div className="action-box">
                <Button className="subscribe-btn">
                  {t("dappIndexoverview.subscribe")}
                </Button>
                <Button className="redemption-btn">
                  {t("dappIndexoverview.redemptionBtn")}
                </Button>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      <div className="info-box">
        <div className="info-title">{t("ltToken.blockTitle")}</div>
        <div className="each-info-box">
          <div className="desc">{t("ltToken.desc1")}</div>
          <div className="desc">{t("ltToken.desc2")}</div>
        </div>
        <div className="each-info-box">
          <div className="block-title">{t("ltToken.blockTitle1")}</div>
          <div className="desc">{t("ltToken.desc3")}</div>
          <div className="desc">{t("ltToken.desc4")}</div>
          <div className="desc">{t("ltToken.desc5")}</div>
          <div className="desc">{t("ltToken.desc6")}</div>
        </div>
        <div className="each-info-box">
          <div className="block-title">{t("ltToken.blockTitle2")}</div>
          <div className="desc">{t("ltToken.desc7")}</div>
          <div className="desc">{t("ltToken.desc8")}</div>
          <div className="desc">{t("ltToken.desc9")}</div>
          <div className="desc">{t("ltToken.desc10")}</div>
          <div className="desc">{t("ltToken.desc11")}</div>
        </div>
        <div className="each-info-box">
          <div className="block-title">{t("ltToken.blockTitle3")}</div>
          <div className="desc">{t("ltToken.desc12")}</div>
        </div>

        <div className="table-box">
          <Table align="center" columns={columns1} dataSource={dataSource1} size="small" pagination={false} bordered/>
        </div>

        <div className="each-info-box">
          <div className="block-title">{t("ltToken.blockTitle4")}</div>
          <div className="desc">{t("ltToken.desc13")}</div>
          <div className="desc">{t("ltToken.desc14")}</div>
          <div className="desc">{t("ltToken.desc15")}</div>

        </div>

        <div className="each-info-box">
          <div className="block-title">{t("ltToken.blockTitle5")}</div>
        </div>

        <div className="table-box">
          <Table align="center" columns={columns2} dataSource={dataSource2} size="small" pagination={false} bordered/>
        </div>

        <div className="each-info-box">
          <div className="block-title">{t("ltToken.blockTitle6")}</div>
          <div className="desc">{t("ltToken.desc16")}</div>

        </div>
        <div className="table-box" >
          <Table align="center" columns={columns3} dataSource={dataSource3} size="small" pagination={false} bordered/>
        </div>

        <div className="each-info-box">
          <div className="block-title">{t("ltToken.blockTitle7")}</div>
          <div className="desc">{t("ltToken.desc17")}</div>
          <div className="desc">{t("ltToken.desc18")}</div>
          <div className="desc">{t("ltToken.desc19")}</div>
          <div className="block-title">{t("ltToken.blockTitle8")}</div>
          <div className="desc">{t("ltToken.desc20")}</div>

          <div className="block-title">{t("ltToken.bloickTitle9")}</div>
          <div className="desc">{t("ltToken.desc21")}</div>

        </div>
      </div>
    </div>
  );
};

export default LTToken;
